<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function f1(){
            console.log(111)
        }

        // 当页面加载完成后再执行
        window.onload = function(){
            var mybtn = document.getElementById('mybtn')
            // 为按钮2绑定点击事件
            mybtn.onclick = function(event){
                console.log(222)
                console.log(event) // 事件对象，包含事件的相关信息
                console.log(event.target) // 事件源
                console.log(this) //  事件源
                console.log(event.target === this)

                /**
                 * 箭头函数与普通匿名函数的区别
                 */ 
                var names = ['tom', 'jack', 'lucy', 'mike']
                // names.forEach(function(item,index){
                //     console.log(item, index, this) // 此处的this表示Window对象
                // })

                names.forEach((item,index) => { 
                    console.log(item, index, this) // 箭头函数不会产生新的this，此处表示的是外层的事件源
                })
            }

            mybtn.onmouseover = function(){
                console.log('鼠标移入')
            }
            mybtn.onmouseout = function(){
                console.log('鼠标移出')
            }

            var username = document.getElementById('username')
            username.onkeypress = function(event){
                // console.log('键盘按下', event)
                if(event.keyCode == 13){
                    console.log('按了回车。。。')
                }
            }

            username.onfocus = function(){
                // username.style.background = 'green'
                this.style.background = 'green'
            }
            username.onblur = function(){
                this.style.background = 'white'
            }

            // 获取复选框 
            var all = document.getElementById('all')
            all.onchange = function(){
                console.log(this.checked)
            }

            // 获取表单
            var myform = document.getElementById('myform')
            myform.onsubmit = function(){
                var username = document.getElementById('username')
                if(username.value == ''){
                    alert('用户名不能为空')
                    return false // false表示不允许提交表单
                }
                return true // true表示允许提交表单
            }
        }
    </script>
</head>
<body>
    <!-- 静态绑定 -->
    <input type="button" value="普通按钮1" onclick="f1()"> 

    <!-- 动态绑定 -->
    <button type="button" id="mybtn">普通按钮2</button>
    <hr>

    <form action="" id="myform">
        用户名： <input type="text" id="username" name="username"> <br>
        全选 <input type="checkbox" id="all"> <br>
        <input type="submit" value="提交">
    </form>

</body>
</html>